﻿<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            background-color: #f5f5f5;
            color: #333;
            font-family: Arial, sans-serif;
        }

        .form {
            max-width: 400px;
            margin: 50px auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .form-inner {
            display: flex;
            flex-direction: column;
        }

        .input-wrapper {
            margin-bottom: 15px;
        }

        .btn-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>

<body>
<div id="app">
    <el-form :model="form" :rules="rules" ref="registerForm" label-width="80px" class="form">
        <div class="form-inner">
            <h2>用户注册</h2>
            <el-form-item label="用户名" prop="account">
                <el-input v-model="form.account"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input type="password" v-model="form.confirmPassword"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="isButtonDisabled" @click="getVerificationCode">
                    {{ buttonText }}
                </el-button>
            </el-form-item>
            <el-form-item label="验证码" prop="verificationCode">
                <el-input v-model="form.captcha"></el-input>
            </el-form-item>
            <div class="btn-group">
                <el-button type="primary" @click="submitForm">注册</el-button>
                <a class="btn--text" href="login.html">已有账号前往登录</a>
            </div>
        </div>
    </el-form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            const validateConfirmPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入确认密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            };

            const validateAccount = (rule, value, callback) => {
                if (value.includes('@')) {
                    callback(new Error('用户名不能包含@符号'));
                } else if (value.length < 4 || value.length > 11) {
                    callback(new Error('用户名必须为4到11位'));
                } else if (/\s/.test(value)) {
                    callback(new Error('用户名不能包含空格'));
                } else {
                    callback();
                }
            };

            return {
                form: {
                    account: '',
                    password: '',
                    confirmPassword: '',
                    email: '',
                    captcha: ''
                },
                rules: {
                    account: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {validator: validateAccount, trigger: 'blur'}
                    ],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    confirmPassword: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        {validator: validateConfirmPassword, trigger: 'blur'}
                    ],
                    email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
                    captcha: [{required: true, message: '请输入验证码', trigger: 'blur'}]
                },
                isButtonDisabled: false,
                buttonText: '获取验证码',
                timer: null
            }
        },
        methods: {
            getVerificationCode() {
                if (this.form.email) {
                    // 发送axios post请求
                    axios.post('/com/captcha/generate?email=' + this.form.email)
                        .then(response => {
                            if (response.data.success) {
                                this.isButtonDisabled = true;
                                this.buttonText = '60秒后重试';
                                let countdown = 60;
                                this.timer = setInterval(() => {
                                    countdown--;
                                    this.buttonText = `${countdown}秒后重试`;
                                    if (countdown <= 0) {
                                        clearInterval(this.timer);
                                        this.isButtonDisabled = false;
                                        this.buttonText = '获取验证码';
                                    }
                                }, 1000);
                                this.$message({
                                    message: "已发送验证码",
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'error'
                                });
                            }

                        })
                        .catch(error => {
                            console.error('获取验证码失败:', error);
                        });

                    return;
                }
                this.$message({
                    message: '请输入入邮箱',
                    type: 'warning'
                });
            },
            submitForm() {
                this.$refs.registerForm.validate((valid) => {
                    if (valid) {
                        axios.post('/register', this.form)
                            .then(response => {
                                if (response.data.success) {
                                    this.$message({
                                        message: "注册成功",
                                        type: 'success'
                                    });
                                    window.location.href = 'login.html';
                                } else {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'error'
                                    });
                                }


                            })
                            .catch(error => {
                                this.$message({
                                    message: '注册失败，请重试！',
                                    type: 'error'
                                });
                                console.error('注册失败:', error);
                            });
                    } else {
                        console.log('表单验证失败');
                        return false;
                    }
                });
            }
        }
    });
</script>
</body>

</html>